<script setup lang="ts" name="todaya">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import { getInspectionPersonStat } from "@/api/server_statType";
import * as echarts from "echarts";
import type { TabsPaneContext } from "element-plus";

// const router = useRouter()

onMounted(() => {
  // 数据接口

  const getList = async () => {
    let res: any = await getInspectionPersonStat({
      statType: "all",
      dateType: "day",
    });
    
    const lists = ref<any>([]);
    lists.value = res.data;
    console.log("res---", lists.value);
    let sum = 0;
    for (let i = 0; i < lists.value.length; i++) {
            sum += lists.value[i].doCnt
        }
        console.log('第一种：' + sum);
  };

  getList();
  const aaa = ref;
  // 图表
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById("todaya")!;
  var myChart = echarts.init(chartDom);
  window.onresize = function () {
    myChart.resize();
  };
  var option: EChartsOption;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      textStyle: {
        color: "rgba(242, 242, 242, 1)",
      },

      inactiveColor: "rgba(108, 108, 108, 1)",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["0h-4h", "4h-8h", "8h-12h", "12h-16h", "16h-20h", "20h-0h"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "巡检总数",
        type: "bar",
        label: {
          show: true,
          position: "inside",
          color: "rgba(255, 255, 255, 1)",
        },
        emphasis: {
          focus: "series",
        },
        data: [50, 40, 60, 50, 80, 70],
      },
      {
        name: "已巡检",
        type: "bar",
        label: {
          show: true,
          position: "inside",
          color: "rgba(255, 255, 255, 1)",
        },
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: [30, 20, 30, 40, 50, 50],
      },
      {
        name: "未巡检",
        type: "bar",
        label: {
          show: true,
          position: "inside",
          color: "rgba(255, 255, 255, 1)",
        },
        stack: "Ad",
        emphasis: {
          focus: "series",
        },
        data: [20, 20, 30, 10, 30, 20],
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<template>
  <div id="todaya" style="height: 100%"></div>
</template>

<style scoped lang="scss"></style>
